<template>
  <div class="container">
    <el-row
      :gutter="20"
      style="height: 100%"
    >
      <el-col
        :md="12"
        :lg="8"
        :xl="6"
      ><div class="grid-content">点击</div></el-col>
      <el-col
        :md="12"
        :lg="8"
        :xl="6"
      ><div class="grid-content">点击</div></el-col>
      <el-col
        :md="12"
        :lg="8"
        :xl="6"
      ><div class="grid-content">点击</div></el-col>
      <el-col
        :md="12"
        :lg="8"
        :xl="6"
      ><div class="grid-content">点击</div></el-col>
    </el-row>
    <div class="btn-area">
      <el-button
        type="primary"
        size="small"
      >点击</el-button>
      <el-button
        type="danger"
        size="small"
      >点击</el-button>
      <el-button
        type="info"
        size="small"
      >点击</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    color: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      hoverColor: '',
      activeColor: ''
    }
  },
  created() {
    // 示例使用
    // const originalColor = '#626aef' // 原始颜色
    // const adjustValue = 47 // 调整量
    // console.log(this.getSimilarColor(this.color, adjustValue))
    this.hoverColor = this.getSimilarColor(this.color, 20)
    this.activeColor = this.getSimilarColor(this.color, -20)
  },
  methods: {
    btnClick() {
      this.$message.success('成功')
    },
    getSimilarColor(hexColor, adjustValue) {
      // 将16进制颜色转换为RGB
      const rgb = parseInt(hexColor.slice(1), 16) // 去掉前缀'#'然后转换为整数
      const r = (rgb >> 16) & 0xff // 提取红色部分
      const g = (rgb >> 8) & 0xff // 提取绿色部分
      const b = rgb & 0xff // 提取蓝色部分

      // 调整RGB值
      const newR = Math.max(0, Math.min(255, r + adjustValue))
      const newG = Math.max(0, Math.min(255, g + adjustValue))
      const newB = Math.max(0, Math.min(255, b + adjustValue))

      // 将调整后的RGB值转换回16进制
      // const newHex =
      //   '#' +
      //   ((1 << 24) + (newR << 16) + (newG << 8) + newB).toString(16).slice(1)
      return `rgb(${newR}, ${newG}, ${newB})`
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  .grid-content {
    background-color: v-bind('color');
    height: 40px;
    line-height: 40px;
    margin-bottom: 20px;
    cursor: pointer;
    text-align: center;
    color: #fff;
    outline: none;
    user-select: none;
  }
  .grid-content:hover {
    background-color: v-bind('hoverColor');
  }
  .grid-content:active {
    background-color: v-bind('activeColor');
  }
}
</style>
